<template>
  <div class="other-card">
    <el-tabs v-model="activeName" class="other-tabs" @tab-click="switchTabs">
      <el-tab-pane label="工单客服" name="team">
        <TeamList ref="teamList" />
      </el-tab-pane>
      <el-tab-pane label="工单预警" name="warn">
        <WarnList ref="warnList" />
      </el-tab-pane>
      <el-tab-pane label="工单级别" name="level">
        <LevelList ref="levelList" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
  import TeamList from '../TeamList/index.vue'
  import WarnList from '../WarnList/index.vue'
  import LevelList from '../LevelList/index.vue'
  import { ref } from 'vue'
  import type { TabsPaneContext } from 'element-plus'

  // 当前选中的标签
  const activeName = ref('team')

  // 工单客服组件实例
  const teamList = ref<InstanceType<typeof TeamList> | null>(null)

  // 工单预警组件实例
  const warnList = ref<InstanceType<typeof WarnList> | null>(null)

  // 工单级别组件实例
  const levelList = ref<InstanceType<typeof LevelList> | null>(null)

  // 导航切换
  const switchTabs = (tab: TabsPaneContext) => {
    activeName.value = tab.props.name as string
    getData()
  }

  // 获取客服列表
  const getTeamList = () => {
    teamList.value.getList()
  }

  // 获取数据方法
  const getData = () => {
    switch (activeName.value) {
      case 'team':
        if (teamList.value) {
          teamList.value.getList()
        }
        break
      case 'warn':
        if (warnList.value) {
          warnList.value.getList()
        }
        break
      case 'level':
        if (levelList.value) {
          levelList.value.getList()
        }
        break
    }
  }

  defineExpose({ getTeamList })
</script>

<style scoped lang="scss">
  @import '../../index.scss';
</style>
